<template>
    <div id="login">
        <div class="header">
            <!--<img src="@img/login.jpg" class="logo">-->
        </div>
        <div class="bg-img">
            <!--<img src="@img/login.jpg">-->
            <div class="bg-color"></div>
        </div>
        <div class="login-box">
            <div class="bg-color"></div>
            <div class="title">欢迎使用</div>
            <div class="input-box">
                <v-input class="user-name" :value="userName" :height="44" placeholder="请输入登录名" @on-change="changeUserName">
                    <i slot="prefix" class="iconfont icon-person"></i>
                </v-input>
                <v-input class="pwd" type="password" :value="pwd" :height="44" placeholder="请输入密码" @on-change="changePwd" @keyup.enter.native="login">
                    <i slot="prefix" class="iconfont icon-Password"></i>
                </v-input>
                <!--<el-select v-model="appType" placeholder="请选择">-->
                <!--<el-option-->
                <!--v-for="item in appOptionData"-->
                <!--:key="item.app_id"-->
                <!--:label="item.app_name"-->
                <!--:value="item.app_id">-->
                <!--</el-option>-->
                <!--</el-select>-->
                <p class="login"  @click="login">登录</p>
                <el-checkbox v-model="checked">记住我的账号</el-checkbox>
            </div>
        </div>
        <p class="copyright font12">© 2020 北京科蓝 京ICP备16027139号-1</p>
    </div>
</template>

<script type="text/ecmascript-6">
    import { nextPage } from '@asst/js/index'
    import ajax from '@api/ajax'
    import {
        LOGIN
    } from '@api/url'
    import store from '@/store'
    import * as effect from './effect.js'
    import CryptoJS from 'crypto-js'

    let UserId = {
        test: /\w{2,}/,
        message: '用户名格式有误(最少2位字符)'
    }

    let Password = {
        test: /\w{1}/,
        message: '密码格式有误(最少6位字符)'
    }

    export default {
        data () {
            return {
                userName: 'admin',
                pwd: 'admin',
                checked: false,
                disabled: false,
                // appType: '',
                appOptionData: []
            }
        },
        methods: {
            changeUserName (val) {
                if (!UserId.test.test(val)) {
                    this.$alert(UserId.message, '温馨提示')
                }
                this.userName = val
            },
            changePwd (val) {
                if (!Password.test.test(val)) {
                    this.$alert(Password.message, '温馨提示')
                }
                this.pwd = val
            },
            login () {
                if (!this.disabled) {
                    if (this.userName) {
                        if (UserId.test.test(this.userName)) {
                            if (this.pwd) {
                                if (Password.test.test(this.pwd)) {
                                    this.disabled = true

                                    const paramsData = {
                                        loginType: 'passwd', // TODO:: tangcheng 登录方式  passwd sms cert
                                        username: this.userName, // 用户编码
                                        password: this.getEncryptPassword(), // 密码
                                        captcha: '', // 数字验证码
                                        smsCaptcha: '', // 短信验证码
                                        certId: '' // 证书编码
                                    }
                                    ajax.post(LOGIN, paramsData).then((res) => {
                                        this.$storeSave.state.userInfo = res.data
                                        if (this.checked) {
                                            localStorage.setItem('userName', this.userName)
                                            localStorage.setItem('checked', true)
                                        } else {
                                            localStorage.removeItem('userName')
                                            localStorage.removeItem('checked')
                                        }
                                        // 查询用户菜单
                                        this.$store.dispatch('system/queryMenus')
                                        nextPage('/home/databoard')
                                    }).catch(req => {
                                        this.disabled = false
                                    })
                                } else {
                                    this.$alert(Password.message, '温馨提示')
                                }
                            } else {
                                this.$alert('密码不能为空', '温馨提示')
                            }
                        } else {
                            this.$alert(UserId.message, '温馨提示')
                        }
                    } else {
                        this.$alert('用户名不能为空', '温馨提示')
                    }
                }
            },
            getAppType () {
                // ajax.post(SELECT_ALL_BAMETA_APP_LIST).then(res => {
                //     if (res.data.length > 0) {
                //         this.appOptionData = res.data
                //     }
                // })
            },
            encryptByDES (message, key) {
                const keyHex = CryptoJS.enc.Utf8.parse(key)
                const encrypted = CryptoJS.DES.encrypt(message, keyHex, {
                    mode: CryptoJS.mode.ECB,
                    padding: CryptoJS.pad.Pkcs7
                })
                return encrypted.toString()
            },
            getEncryptPassword () {
                const password = this.pwd
                const key = '38442065' + this.userName

                return this.encryptByDES(password, key)
            }
        },
        created () {
            this.userName = this.userName || localStorage.getItem('userName')
            this.checked = Boolean(localStorage.getItem('checked'))
            this.getAppType()
        },
        mounted () {
            effect.init()
            effect.start()
            effect.displayOn(this.$el)
        },
        beforeDestroy () {
            effect.stop()
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    #login
        position fixed
        top 0
        left 0
        bottom 0
        right 0
        background-color #f1f4fa
        .header
            margin 10px 0 0 50px
            color #fff
            .logo
                width 460px
            .desc
                margin-left 20px
                position relative
                top -13px
        .bg-img
            position absolute
            top 15%
            left 5%
            width 50%
            height auto
            img
                width 100%
                height 100%
                padding 20px 20px
                pointer-events none
                user-select none
            .bg-color
                position absolute
                top 0px
                width 100%
                height 100%
                background-color #f04959
                opacity 0.1
                z-index -1
        .login-box
            width 350px
            height 338px
            position absolute
            top 50%
            right 5%
            margin-left -210px
            margin-top -167px
            padding-top 40px
            .bg-color
                position absolute
                top 0
                width 100%
                height 100%
                background-color #cbc8ca
                border-top-left-radius 45px
                border-bottom-right-radius 45px
                z-index -1
                opacity 0.5
            .title
                font-size 20px
                font-weight: bold;
                text-align center
                margin-bottom: 10px;
            .input-box
                width 250px
                margin auto
                .el-input__inner
                    width 250px
                .v-input
                    margin-bottom 20px
                    .iconfont
                        color #f04959
                .login {
                    line-height 44px
                    text-align center
                    background #f04959
                    color #fff
                    border-radius 3px
                    cursor pointer
                    margin-bottom 20px
                }
                .disabled {
                    background #f04959
                    cursor not-allowed
                }
        .copyright
            width 100%
            line-height 36px
            margin auto
            color #fff
            text-align center
            position absolute
            bottom 0
            left 0
        .input-box
            .el-select
                width 100%
                height 44px
                line-height 44px
                margin 0 0 20px
        .effect-box
            position absolute
            left 0px
            top 20%
            z-index -2
</style>
